<template>
    <div class='bgff h100 pd pt10 dfgfdgtrt'>
        <p class="title-label">产品管理</p>

        <div class="mt20 sdfgdgdfyt">
            <n-form ref="formRef" :model="formValue"   label-width="120" :rules="rules" :inline="false" size="normal" label-placement="left">
                <n-grid :cols="24" :x-gap="20">
                    <n-form-item-gi span="24" label="产品标题:" path="title" class="mt20">
                        <n-input v-model:value="formValue.title" type="text" placeholder="请输入产品标题" size="medium"
                            clearable></n-input>
                    </n-form-item-gi>
         
                    <n-form-item-gi span="24" label="副标题:" path="subhead" class="mt20">
                        <n-input v-model:value="formValue.subhead" type="text" placeholder="请输入产品副标题" size="medium"
                            clearable></n-input>
                    </n-form-item-gi>
                    <n-form-item-gi span="24" label="简介:" path="synopsis" class="mt20">
                        <n-input v-model:value="formValue.synopsis" type="textarea" placeholder="请输入产品副标题" size="medium"
                            clearable></n-input>
                    </n-form-item-gi>
                  
                    <n-form-item-gi span="9" label="封面:" path="cover" class="mt20">
                        <div class="logo-context vertical-center " @click="photoShowModal = true">
                            <img :src="formValue.cover" class="w100 h100 imgjz" v-if="formValue.cover" />
                            <span v-else>点击上传产品封面</span>
                        </div>
                    </n-form-item-gi>
                    <n-form-item-gi span="15" label="产品类型:" path="type" class="mt20">
                        <n-select v-model:value="formValue.type" size="medium" :options="cpoptions" clearable />
                        
                    </n-form-item-gi>
                    <n-form-item-gi span="24" label="产品头图:" path="webBanner" class="mt20">
                        <div class="logo-context ab vertical-center " @click="photoShowModaler = true">
                            <img :src="formValue.webBanner" class="w100 h100 imgjz" v-if="formValue.webBanner" />
                            <span v-else>点击上传产品头图</span>
                        </div>
                    </n-form-item-gi>
                    <n-form-item-gi span="24" label="" path="" class="mt20">
                        <p class="fz18 b">产品介绍：</p>
                        <div class="fwbclass ">
                            <tinymce ref="tinymceref" ></tinymce>
                        </div>
                    </n-form-item-gi>
                    <n-form-item-gi span="24" label="" path="" class="mt20">
                        <p class="fz18 b">规格：</p>
                        <div class="fwbclass ">
                            <tinymce ref="tinymceerref" ></tinymce>
                        </div>
                    </n-form-item-gi>
                </n-grid>
            </n-form>
        </div>
        <div class="jkjnjmxertw  vertical-center">
            <div>
                <n-button type="primary" size="medium" @click="subform">{{isBj?'保存':'新增'}}解决产品</n-button>
                <n-button type="error" size="medium" @click="fhsyy" class="ml20">返回上一页</n-button>
            </div>

        </div>
        <n-modal v-model:show="photoShowModal" preset="card" class="Stock-diagnosis">
            <template #header>
                <div>产品封面</div>
            </template>
            <div>
                <photoGallery @getImg="getImg" types="cg产品封面"></photoGallery>
            </div>
            <template #action>
                <div class="tr">
                    <n-button @click="photoShowModal = false"> 取消 </n-button>
                    <n-button class="ml10" type="info" @click="setImg"> 确定 </n-button>
                </div>
            </template>
        </n-modal>
        <n-modal v-model:show="photoShowModaler" preset="card" class="Stock-diagnosis">
            <template #header>
                <div>产品头图</div>
            </template>
            <div>
                <photoGallery @getImg="getImger" types="cg产品头图"></photoGallery>
            </div>
            <template #action>
                <div class="tr">
                    <n-button @click="photoShowModaler = false"> 取消 </n-button>
                    <n-button class="ml10" type="info" @click="setImger"> 确定 </n-button>
                </div>
            </template>
        </n-modal>
    </div>
</template>
<script lang='ts' setup>
import { ref } from "vue";
import { dialog, callBack, dxpost,qurl,dxget } from "../../util/index";
import photoGallery from "../../components/util/photoGallery";
import tinymce from "../../components/util/tinymce.vue"
const photoShowModal = ref(false)
const photoShowModaler = ref(false)
const formRef = ref()
const apiurl = "cgkj/cgproducts"
const tinymceref = ref()
const tinymceerref = ref()
const isBj = ref()
const cz = qurl()
const cpoptions = ref([])
const Userid = localStorage.id
const formValue = ref({
    title: "",
    synopsis: "",
    subhead:"",
    cover:"",
    type:"1",
    webBanner: "",
    xq: "",
    specification:""
})

let jjnmnxe = "";
const getImg = (data) => {
    jjnmnxe = data;
};
const setImg = () => {
    formValue.value.cover = jjnmnxe;
    photoShowModal.value = false;
};

let jjnmnxeer = "";
const getImger = (data) => {
    jjnmnxeer = data;
};
const setImger = () => {
    formValue.value.webBanner = jjnmnxeer;
    photoShowModaler.value = false;
};

const fhsyy = async () => {
    const type = await dialog("确认返回吗?")
    if (type) {
        callBack()
    }
}
const rules = {
    title: {
        required: true,
        message: '请输入解决产品标题',
        trigger: 'blur'
    },
    synopsis: {
        required: true,
        message: '请输入产品简介',
        trigger: 'blur'
    }, 
    subhead: {
        required: true,
        message: '请输入解决产品副标题',
        trigger: 'blur'
    },
    
    
    cover: {
        required: true,
        message: '请上传产品封面',
        trigger: 'blur'
    },
    webBanner: {
        required: true,
        message: '请上传产品头图',
        trigger: 'blur'
    },
}
const subform = () => {
    const fwbtext = tinymceref.value.getContent().trim()
    const fwbtexter = tinymceerref.value.getContent().trim()
    if (!fwbtext) {
        window.$message.error("请输入解决产品详情")
        return
    }
    let apitype = "post"
    if (isBj.value) {
        apitype = 'put'
    }
    formValue.value.xq = fwbtext
    formValue.value.specification = fwbtexter
    formRef.value?.validate(async (errors) => {
        if (!errors) {
            const { errno }: any = await dxpost(apiurl, formValue.value,apitype)
            if (errno == 0) {
                callBack()
            }
        }
    })
}
const initData = async () => {
    const { data }: any = await dxget(apiurl, { id: cz.id })
    formValue.value = data
    tinymceref.value.setContent(data.xq)
    tinymceerref.value.setContent(data.specification)
}

const getcptype = async ()=>{
    const { data }: any = await dxget("dxgjAdmin/getzd?name=cgproductstype",{roid:Userid})
    cpoptions.value  = data
}
getcptype()

if (cz.id) {
    isBj.value = true
    initData()
}
</script>
<style scoped>
.dfgfdgtrt {
    overflow: auto;
    padding-bottom: 150px;
}

.sdfgdgdfyt {
    width: 800px;
}

.fwbclass {
    width: 1500px;
    height: 500px;
}

.jkjnjmxertw {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 999;
    background: #fff;
    height: 50px;
    width: 100%;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.logo-context {
    width: 100%;
}

</style>